<template>
  <div id="a">
    <div id="SubjectsTitle">
      <h3>成绩展示</h3>
    </div>
    <div id="VariousSubjects"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { zhuti } from "@/assets/index.js";
import { TitleComponent } from "echarts/components";
import { TreemapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import pubsub from "pubsub-js";
export default {
  name: "VariousSubjects",
  data() {
    return {
      stuId: "",
      Course1: [], // 专业必修
      Course2: [], // 通识必修
      Course3: [], // 通识选修

      // 每门课的学分
      CoursePoint1: [],
      CoursePoint2: [],
      CoursePoint3: [],

      // 每门课的成绩
      score1: [],
      score2: [],
      score3: [],
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
      this.stuId = data;
      // console.log("成绩展示", this.stuId);
      // this.getInfo();
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/stucourse/list/${this.stuId}/`),
        method: "get",
      }).then((response) => {
        this.Course1 = [];
        this.Course2 = [];
        this.Course3 = [];
        this.CoursePoint1 = [];
        this.CoursePoint2 = [];
        this.CoursePoint3 = [];
        this.score1 = [];
        this.score2 = [];
        this.score3 = [];
        for (let index in response.data.data) {
          if (response.data.data[index].type == 1) {
            this.Course1.push(response.data.data[index].courseName);
            this.CoursePoint1.push(response.data.data[index].credit);
            this.score1.push(response.data.data[index].compsScore);
          } else if (response.data.data[index].type == 2) {
            this.Course2.push(response.data.data[index].courseName);
            this.CoursePoint2.push(response.data.data[index].credit);
            this.score2.push(response.data.data[index].compsScore);
          } else {
            this.Course3.push(response.data.data[index].courseName);
            this.CoursePoint3.push(response.data.data[index].credit);
            this.score3.push(response.data.data[index].compsScore);
          }
        }
        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      echarts.use([TitleComponent, TreemapChart, CanvasRenderer]);

      var chartDom = document.getElementById("VariousSubjects");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      // 三类课程的总学分
      let sum = [
        this.CoursePoint1.reduce((a, b) => a + b, 0),
        this.CoursePoint2.reduce((a, b) => a + b, 0),
        this.CoursePoint3.reduce((a, b) => a + b, 0),
      ];

      let data = [
        {
          name: "专业必修课",
          value: sum[0],
          children: this.Course1.map((course, index) => ({
            name: course,
            value: this.CoursePoint1[index],
            score: this.score1[index],
          })),
        },
        {
          name: "通识必修课",
          value: sum[1],
          children: this.Course2.map((course, index) => ({
            name: course,
            value: this.CoursePoint2[index],
            score: this.score2[index],
          })),
        },
        {
          name: "通识选修课",
          value: sum[2],
          children: this.Course3.map((course, index) => ({
            name: course,
            value: this.CoursePoint3[index],
            score: this.score3[index],
          })),
        },
      ];

      function getLevelOption() {
        return [
          {
            itemStyle: {
              borderColor: "#777",
              borderWidth: 0,
              gapWidth: 1,
            },
            upperLabel: {
              show: false,
            },
          },
          {
            itemStyle: {
              borderColor: "#555",
              borderWidth: 5,
              gapWidth: 1,
            },
            emphasis: {
              itemStyle: {
                borderColor: "#ddd",
              },
            },
          },
          {
            colorSaturation: [0.35, 0.5],
            itemStyle: {
              borderWidth: 5,
              gapWidth: 1,
              borderColorSaturation: 0.6,
            },
          },
        ];
      }

      option = {
        series: [
          {
            type: "treemap",
            data: data,
            visibleMin: 300,
            label: {
              show: true,
              formatter: function (params) {
                return `${params.data.name}\n学分: ${
                  params.data.value
                } 分\n成绩：${params.data.score || "已录入"}`;
              },
            },
            upperLabel: {
              show: true,
              height: 40,
            },
            itemStyle: {
              borderColor: "#fff",
            },
            levels: getLevelOption(),
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
#a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#SubjectsTitle {
  flex: 1;
  background-color: aqua;
  margin-bottom: 10px;
}
h3 {
  text-align: left;
}
#VariousSubjects {
  flex: 9;
}
</style>
